<template>
       <view class="head" style="background-color: #ffcc00; height: 180rpx; display: flex;">
      <img 
        style="height: 50rpx; width: 50rpx; padding: 10rpx; margin-top: 15%;"  
        src="../../../static/tabbar/返回.png" 
        alt="" 
        @click="handleBack"
      />
      <view style="height: fit-content; margin-top: 15%; margin-left: 30%; font-size: 32rpx;">修改信息</view>
    </view>

    <!-- 头像选择 -->
    <view class="avatar-wrapper">
      <button class="avatar-button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
        <image class="avatar" :src="userInfo.headImg || defaultAvatarUrl"></image>
      </button>
    </view>

    <uni-section title="用户名" type="line" padding>
			<uni-easyinput v-model="userInfo.name" :styles="styles" :placeholderStyle="placeholderStyle" placeholder="请输入用户名" @input="handleInput('name', $event)"></uni-easyinput>
	</uni-section>
    <uni-section title="电话号码" type="line" padding>
			<uni-easyinput v-model="userInfo.phoneNumber" :styles="styles" :placeholderStyle="placeholderStyle" placeholder="请输入电话号码" @input="handleInput('phoneNumber', $event)"></uni-easyinput>
	</uni-section>
    
    
    <!-- <uni-section title="生日" type="line" padding>
      <uni-easyinput v-model="userInfo.birthday" :styles="styles" :placeholderStyle="placeholderStyle" type="date" placeholder="请选择生日" @input="handleInput('birthday', $event)"></uni-easyinput>
    </uni-section> -->
    <view>
      <uni-section title="性别" type="line">
        <uni-data-select
          v-model="userInfo.gender"
          :localdata="genderOptions"
          @change="handleGenderChange"
        ></uni-data-select>
      </uni-section>
    </view>
     <button class="confirm" @click="handleSave">保存信息</button>
  </template>
  
  <script setup>
    import { ref, onMounted } from 'vue';
    import { updateWxUserInfo } from '@/api/wxlogin/wxlogin';

    const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0';

    const userInfo = ref({
      name: '',
      phoneNumber: '',
      password: '',
      headImg: defaultAvatarUrl, // 默认头像
      birthday: '',
      gender: '男', // 默认值为 "男"
    });

    const genderOptions = [
      { value: '男', text: "男" },
      { value: '女', text: "女" },
    ];

    // 从本地存储中获取用户信息
    onMounted(() => {
      const storedUserInfo = uni.getStorageSync('userInfo');
      if (storedUserInfo) {
        userInfo.value = JSON.parse(storedUserInfo);
      }
    });

    // 处理输入框内容变化
    const handleInput = (field, value) => {
      userInfo.value[field] = value;
    };

    // 处理性别选择变化
    const handleGenderChange = (e) => {
      userInfo.value.gender = e;
    };

    // 处理头像选择
    const onChooseAvatar = (e) => {
      const { avatarUrl } = e.detail;
      userInfo.value.headImg = avatarUrl; // 直接获取头像 URL
    };

    // 保存用户信息
    const handleSave = async () => {
      try {
        const userId = uni.getStorageSync('userId');
        console.log("userId", userId);
        console.log("上传信息", userId ,userInfo.value);
        const res = await updateWxUserInfo(userId, userInfo.value);

        if (res.code === 200) {
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          });
          // 更新本地存储中的用户信息
          uni.setStorageSync('userInfo', JSON.stringify(userInfo.value));
        } else {
          throw new Error(res.msg || '保存失败');
        }
      } catch (err) {
        console.error('保存失败:', err);
        uni.showToast({
          title: err.message || '保存失败',
          icon: 'none'
        });
      }
    };

    // 返回上一页
    const handleBack = () => {
      uni.navigateBack();
    };
  </script>
  
  <style lang="scss">
    .text {
      font-size: 12px;
      color: #666;
      margin-top: 5px;
    }
  
    .uni-px-5 {
      padding-left: 10px;
      padding-right: 10px;
    }
  
    .uni-pb-5 {
      padding-bottom: 10px;
    }
    .avatar-wrapper {
      display: flex;
      justify-content: center;
      margin: 20rpx 0;
    }

    .avatar-button {
      background: none;
      border: none;
      padding: 0;
      margin: 0;
    }

    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
    }

    .confirm {
      margin: 0 auto;
      width: 40rpx;
      border-radius: 10px;
      background-color: #ffcc00;
      width: fit-content;
      margin-top: 20rpx;
    }
  </style>
  